import React from "react";

function Son ({ fun }) {
  function sonEmit() {
    fun('来自子组件的数据2')
  }
  return (
    <div>
      this is son
      <br />
      <button onClick={() => { fun('来自子组件的数据1') }}>子组件通信1</button>
      <br />
      <button onClick={ sonEmit }>子组件通信2</button>
    </div>
  )
}

// react类组件
class Component extends React.Component {
  getSonMsg(msg) {
    console.log(msg);
  }
  // 渲染ui结构
  render() {
    return (
      <>
        <Son fun={ this.getSonMsg }></Son>
      </>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Component></Component>
    </div>
  );
}

export default App;


// import React from "react";

// function SonA (props) {
//   console.log(this);
//   function sonEmit() {
//     props.fun('传递SonA的一个数据2')
//   }
//   return (
//     <div>
//       <button onClick={ () => { props.fun('传递SonA的一个数据1') } }>SonA1</button>
//       <button onClick={ sonEmit }>SonA2</button>
//     </div>
//   )
// }

// class SonB extends React.Component {
//   sonEmit = () => {
//     this.props.fun('传递SonB的一个数据2')
//   }

//   render() {
//     return (
//       <div>
//         <button onClick={ () => { this.props.fun('传递SonB的一个数据1') } }>SonB1</button>
//         <button onClick={ this.sonEmit }>SonB2</button>
//       </div>
//     )
//   }
// }

// function App () {
//   function getSonA(msg) {
//     console.log('SonA的数据：' + msg);
//   }
//   function getSonB(msg) {
//     console.log('SonB的数据：' + msg);
//   }
//   return (
//     <>
//       <SonA fun={ getSonA }></SonA>
//       <SonB fun={ getSonB }></SonB>
//     </>
//   )
// }

// export default App;
